# Remotion：用 AI 编程做动画视频

> 从安装到出片，全程手把手



你好，我是程序员鱼皮。

AI 编程能做的事情远比你想象的多。除了做网站、做工具、做小程序，还能做动画视频！

最近我发现一个很有意思的开源项目叫 [Remotion](https://github.com/remotion-dev/remotion)，能用写代码的方式做视频动画，在 GitHub 上星星很多。

![](https://pic.yupi.icu/1/image-20260216222601866.png)

你可能会问：用代码做视频？那不得累死？

别急，我们当然不会自己写代码。**让 AI 帮你写就完了！**

用 AI 编程做动画的原理其实很简单：

- AI 写代码
- Remotion 把代码渲染成视频

![官方给的动画成果展示](https://pic.yupi.icu/1/image-20260216223620684.png)

下面我带大家完整走一遍流程，从安装到出片，全程手把手，保姆皮上线~

📺 也可以看视频版：https://bilibili.com/video/BV1qxFSzUEwo



## 一、安装 Remotion

首先，打开终端，输入一行命令快速安装 Remotion：

```bash
npx create-video@latest
```

执行之后，它会问你几个问题：

1. 选一个模板 > 我选了 Hello World
2. 项目名叫什么 > 就叫 `myvideo`
3. 是否使用 TailwindCSS > 用呗
4. 是否添加 AI 智能体技能 > 这个一定要加！

![](https://pic.yupi.icu/1/1770370961690-58c49ba5-aecf-4194-8f27-d2db91db6087.png)

添加了这个技能之后，你就可以通过 AI 对话的方式，让 AI 帮你用这个库做动画了。

安装技能的时候，它会问你装到哪些智能体里、是当前项目安装还是全局安装。我建议直接全局安装，省得以后每个项目都要重新装一遍。

> 注意：你需要确保自己能访问 GitHub，不然可能会报错。

安装完成后，进到项目目录，安装依赖并运行：

```bash
npm install
npm run dev
```

![](https://pic.yupi.icu/1/1770372083166-73703f97-3ef2-4980-922d-0b3a0116245d.png)

打开浏览器，你会看到一个 **Web 端的视频剪辑工具**：

![](https://pic.yupi.icu/1/1770372166367-c5facfbf-1829-4b03-8dde-5e86ed1064f2.png)

看看这界面，不知道的还以为是客户端软件呢！

页面左侧展示了不同的视频片段，每个片段其实都是通过代码渲染出来的。你删掉一段代码，对应的视频就没了：

![](https://pic.yupi.icu/1/1770372458099-64e9f878-ebf6-42b9-9c78-bde4e5fd40e2.png)

在代码编辑器中按 Ctrl+Z 撤回，视频又出来了。是不是挺神奇的？

![](https://pic.yupi.icu/1/1770372446540-126bd94f-f484-4631-8813-086a27c05b50.png)



## 二、让 AI 帮你做视频

我们不可能自己写代码来做视频，肯定是让 AI 来。

打开一个 AI 编程工具，我这里用的是 VS Code + GitHub Copilot AI 插件，选了最新的模型 Claude Opus，100 万上下文，还是很牛的。

![](https://pic.yupi.icu/1/1770372617235-a5aef8ec-c45d-45fd-9673-e583892d97c3.png)



### Demo 1、鱼头人唱 RAP

我直接给 AI 发了这段话：

```
一条鱼头人正在唱中文 RAP，RAP 的内容是称赞一位叫程序员鱼皮的博主，屏幕上动态显示歌词（快闪风格）
```

你会看到，AI 直接找到了我们之前安装的 **Remotion Best Practices** 技能包，它会让 AI 知道怎么用编程的方式做动画。

![](https://pic.yupi.icu/1/1770373151980-28c9faa7-1d76-48cd-87f5-f75fbb748dbd.png)

然后它就开始编写动画代码了。等了一会儿，AI 完成了任务。

![](https://pic.yupi.icu/1/1770373512515-abf6f754-1e68-4b64-a540-bc68261385d4.png)

直接在浏览器中就能看到效果了，鱼头人 on the beat 🐟~

![](https://pic.yupi.icu/1/1770373656918-73c8de55-5e4e-4ac0-9328-27ce1791cbd7.png)

怎么说呢，有点太抽象了 bro！不过毕竟是第一个 Demo 嘛，我也没有太高的预期。下面我们来搞个更有意思的、鸡动人心的（要素察觉）。



### Demo 2、鸡你太美

新开一个 AI 对话框，这次我换了个更具体的需求：

```
帮我做一个小鸡一边打篮球一边 RAP 的爆款视频，大概 20 秒，要求有视觉冲击感、要足够洗脑，让人一看就想点赞、循环播放。

我是傻子，你需要告诉我提供哪些素材，如果不理解需求，找我提问确认，并且最后完成视频。
```

然后你猜怎么着，AI 居然识别出了「鸡你太美」这个梗！不是哥们。

![](https://pic.yupi.icu/1/1770373956714-208a1770-bc85-4cc8-a5e8-64190b5fd645.png)

它说不需要我提供任何素材就能搞定，那就直接开干！

![](https://pic.yupi.icu/1/1770374224644-1c139dc4-4816-4be4-902b-d6b9c6b32045.png)

等它一顿操作之后，做出来了一个新视频，来看看效果：

![](https://pic.yupi.icu/1/1770374335310-abd1443e-daf5-4ab0-ba9a-c1377bc00743.png)

不是哥们，你管这玩意叫 “小鸡”？胳膊和腿儿都分离了啊！是不是有点太抽象了？？？

而且目前没有背景音乐和唱 RAP 的音效，有点干巴，我只能脑补出 “鸡你太美，噔噔噔噔，北鼻……” 的音乐，还是要加点真实的素材。



## 三、用素材优化视频

由于动画是 AI 做的，它可能比我更清楚需要哪些素材、以及放到哪些位置，所以我让 AI 来引导我完善素材。

发送提示词：

```
现在的动画有点生硬，缺少真实的图片、背景音乐和音频，请你引导我应该怎么完善这些内容，我是傻子
```

AI 就会开始通过交互提问的方式来引导我，一步步告诉我该做什么。

![](https://pic.yupi.icu/1/1770374563833-99fb5a74-a01e-4b03-a40e-6c524cf79f05.png)

AI 给出了方案，大概需要这些素材：

1. 小鸡图片 > 我自己来找
2. 背景音乐 > 我自己来找
3. 篮球场背景图 > 让 AI 帮我搜
4. RAP 人声 > 用 AI 生成

下面，我们根据指引依次来搞定这些素材。

![](https://pic.yupi.icu/1/1770374728643-eae31379-ea6f-4d92-8a1a-1099cb982864.png)



### 1、准备小鸡图片和背景音乐

这两个素材比较简单，自己手动找就好了，没啥好说的。

![](https://pic.yupi.icu/1/1770374951228-b2004e7e-3c86-49ed-9dfa-2c9e58b4ba78-20260217230953964.png)



### 2、让 AI 帮忙搜背景图

AI 可以利用 Firecrawl Search 这个 MCP 工具来帮忙搜索网络图片。

如果你不知道怎么安装 MCP 工具，可以参考我的[《AI 编程零基础入门教程》](https://ai.codefather.cn/vibe)中 “优质 AI 编程扩展推荐” 这一节。

> 指路：[ai.codefather.cn/vibe](https://ai.codefather.cn/vibe)

![鱼皮AI导航网站-免费AI编程教程](https://pic.yupi.icu/1/image-20260217223852396.png)

我跟 AI 说：

```
帮我下载背景图，要求背景图必须是鸡你太美这个梗的原始背景图，干净的背景图，不听话的话我就再也不用你了！
```

在我的威胁下，AI 乖乖听话，不仅找到了几张图，还说要帮我挑一个最好的，我都要感动哭了。

![](https://pic.yupi.icu/1/1770375324834-9234ff52-46cc-431f-828b-c84c34292e91.png)

虽然中间有一张图被抠得只剩一个人了（人工智障），但最终还是找到了能用的背景图。

![](https://pic.yupi.icu/1/1770375487350-568ae132-e990-4c5a-90e2-f4e21aad6cd1.png)



### 3、用 Suno 生成 RAP 人声

AI 推荐我用 [Suno AI](https://suno.com) 来生成人声，还提供了生成人声的提示词。

![](https://pic.yupi.icu/1/1770375504060-d552ff39-19d6-4b3d-9943-86cc2ca40720.png)

直接打开官网注册登录，选择 Simple 简易模式，把歌词和要求粘进去：

```
中文说唱，嘻哈节拍，120BPM，时长 18 秒，歌词：
篮球在我手 全场我最秀
Crossover过掉你 无情暴扣
鸡你太美 Baby
左手运球 右手写RAP
三分线拔起 全网都炸裂
只因你太美
```

然后点击创建，一次性生成了多个版本的 RAP 人声：

![](https://pic.yupi.icu/1/1770376253976-b62c46b0-4c2c-49c5-bbaa-e12b8414254f.png)

我听了一下，免费模型生成的效果居然还不错！直接下载 MP3 音频文件，倍速一下就能用了。



### 4、让 AI 合成最终视频

所有素材都准备好了，我把文件按照要求放到项目目录里，然后跟 AI 说：

```
素材放好了
```

![](https://pic.yupi.icu/1/1770376293681-f824c758-5ecc-4e66-a3c3-92ccc1d9c4ac-20260217224715624.png)

然后 AI 就开始替换素材，稍等一会儿，AI 的大作就完成了。来看看最终效果：

![](https://pic.yupi.icu/1/1770376707651-1829d201-8f85-495d-b2eb-a18c6fe96e3c.png)

有了素材后，比之前纯靠 AI 生成 SVG 和 Emoji 的版本好了不少，背景图、背景音乐、RAP 人声、歌词动画都加上了。虽然还是有点生硬（比如中间的小鸡图片略显诡异），但整体已经有内味儿了。



## 四、优化思路

目前动画视频存在 2 个比较严重的问题，我说一下自己的优化思路。

**问题 1、素材不够真实**

如果完全让 AI 用代码绘制素材（SVG、Emoji 之类的），出来的东西比较抽象。所以建议自己多补充一些真实的图片素材，效果会好很多。

**问题 2、声音和画面歌词对不上**

可以先让 AI 生成歌词以及对应的时间线，然后把这个时间线同时交给 AI 做动画视频和 AI 生成音频。这样两边都是按照同一个时间线来编排的，画面和声音就能对上了。



## 写在最后

用 AI 编程的方式来做视频，在画面真实感和流畅度上肯定没法跟 Seedance、Sora、可灵这些视频生成模型比较。但它有自己的优势，比如完全可控、可编辑、可复现，而且不需要消耗 GPU 算力和昂贵的视频 API 费用，纯靠代码渲染就行。只要你描述到位、再人工多补充一些素材，做出来的效果其实也能满足很多场景。

我觉得这个工具比较适合做下面几类视频：

- 动画演示视频：比如讲解一个知识点，让 AI 帮你变成动画
- 快闪文字类视频：歌词快闪、文字动效这类
- 抽象整活视频：鸡你太美这种梗视频
- 知识科普动画：虽然看起来生硬，但能帮别人快速理解知识

这个案例再次证明了 AI 编程的应用范围远比我们想象的广，不局限于做网站和工具。感兴趣的同学可以自己去试试，Remotion 是完全开源免费的：

> 开源仓库：https://github.com/remotion-dev/remotion

加油，期待看到你用 AI 编程做出来的创意作品！💪



## 推荐资源

1）鱼皮 AI 导航网站：[AI 资源大全、最新 AI 资讯、免费 AI 教程](https://ai.codefather.cn)

2）编程导航学习圈：[学习路线、编程教程、实战项目、求职宝典、交流答疑](https://www.codefather.cn)

3）程序员面试八股文：[实习/校招/社招高频考点、企业真题解析](https://www.mianshiya.com)

4）程序员写简历神器：[专业模板、丰富例句、直通面试](https://www.laoyujianli.com)

5）1 对 1 模拟面试：[实习/校招/社招面试拿 Offer 必备](https://ai.mianshiya.com)